<style>
#sectionNowrap span.error{
	position: absolute !important;
	left: 215px;
	top:0px;
}
#sectionNum span.error{
	position: absolute !important;
	left: 145px;
	top:0px;
}
</style>
<div class="pageContent">
	<form method="post" id="screenFrom" name="screenFrom"  action="${rc.getContextPath()}/manage/screen/saveScreen" class="pageForm required-validate" onsubmit="return validateCallback(this,dialogAjaxDone);">
		<div class="pageFormContent">
			<input type="hidden" name="navTabId" value="${navTabId!''}"> 
			<input type="hidden" name="id" <#if pattern=='modify'>value="${screen.screenCode!''}"</#if>">
			<p>
				<label><@label key="businessType.C,colon">业务类型:</@label></label>
				<select name="businessType" class="required" disabled="disabled">
					<#list businessTypes as type>
					<option value="${type.businessType}"<#if type.businessType?? && type.businessType == screen.businessType> selected="selected"</#if>>${type.businessType}-${type.businessTypeText}</option> 
					</#list>
				</select>
			</p>
			<p></p>
			<p>
				<label><@label key="screenCode.C,colon">界面编号:</@label></label>
				<input name="screenCode" size="22" readonly="readonly" type="text" maxlength="60" class="required alphanumeric toUp"  value="${screen.screenCode!''}" />
			</p>
			<p>
				<label><@label key="screenText.C,colon">界面描述:</@label></label>
				<input name="screenText" size="22" readonly="readonly" type="text" maxlength="60" class="required" value="${screen.screenText!''}" />
			</p>
		</div>
       	<div style="padding: 0px 10px 10px 10px;">
			<div class="createInfo">
			    <p  style="float: left;">
			        <label class="time"><@label key="createDateTime.C,colon">创建时间：</@label><#if (screen.createDateTime)??>${screen.createDateTime?string("yyyy-MM-dd HH:mm:ss")}</#if></label>
			        <label class="user"><@label key="createUser.C,colon">创建人：</@label><#if (screen.createUser)??>${screen.createUser}</#if></label> 
			    </p>
			    <p>
			        <label class="time"><@label key="modifyDateTime.C,colon">修改时间</@label><#if (screen.modifyDateTime)??>${screen.modifyDateTime?string("yyyy-MM-dd HH:mm:ss")}</#if></label>
			        <label class="user"><@label key="modifyUser.C,colon">修改人：</@label><#if (screen.modifyUser)??>${screen.modifyUser}</#if></label>
			    </p>
			</div>
        </div> 
        <div class="unitBox" style=" margin-top:10px;float: left; display: block; overflow: hidden; width: 50%; background: #fff;border: 1px #d8dfe5 solid;" >
            <table id="sectionTable" class="table" style="width: 100%;" layoutH="185">
                <thead>
                    <tr>
                        <th width="60"><@label key="section.C">版块</@label></th>
                        <th width="70"><@label key="sectionText.C">版块描述</@label></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div class="unitBox" style=" margin-top:10px;float: right; display: block; overflow: hidden; width: 49%;background: #fff; border: 1px #d8dfe5 solid;">
            <table id="screenFieldTable" class="table" style="width: 100%;" layoutH="185">
                <thead>
                    <tr>
                        <th width="55"><@label key="businessField.C">业务字段</@label></th>
                        <th width="55"><@label key="businessFieldText.C">业务字段描述</@label></th>
                        <th width="20"><@label key="readonlyFlag.C">只读</@label></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div class="formBar">
            <ul>
                <li><div class="buttonActive">
                        <div class="buttonContent">
                            <button type="button" class="close"><@label key="close.B">关闭</@label></button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
	</form>
</div>
<script type="text/javascript">
	var $page = DWZ.context(),sectionMap = new Map(),row = 0,businessfields="",onClickSection="";
	var fieldMap,section,screenField;
	var $form =$("#screenFrom", $page);
	(function($){
		$.DWZajax({
            url:hostUrl +"/screen/getSection",
            data:{
            	'code':$("input[name='screenCode']",$page).val(),
            	"businessType":$("select[name='businessType']",$page).val()},
            callback:function(data){
            	if(data && data.length > 0){                		
            		for(var i=0; i<data.length; i++){  
            			row++;
						section = new Object();
						fieldMap = new Map();
						var screenFieldList = data[i].screenField;
						for(var j=0; j<screenFieldList.length; j++){							
							screenField = new Object();
							if(screenFieldList[j].businessField!=null){
								screenField.businessField=screenFieldList[j].businessField;
								if(businessfields==""){
									businessfields = screenFieldList[j].businessField;
								}else{
									businessfields = businessfields +","+screenFieldList[j].businessField;
								};
							}else{
								screenField.businessField=null;
							}
							screenField.businessFieldText=screenFieldList[j].businessFieldText;
							screenField.id=screenFieldList[j].id;
							screenField.readonlyFlag=screenFieldList[j].readonlyFlag;
							screenField.fieldOrdinal=screenFieldList[j].fieldOrdinal;
							fieldMap.put(screenFieldList[j].fieldOrdinal,screenField);							
						}
						section.sectionOrdinal=data[i].sectionOrdinal;
						section.screenFields=fieldMap;
						section.sectionCode=data[i].sectionCode;
						section.sectionText=data[i].sectionText;
						section.pattern="modify";
						sectionMap.put(data[i].sectionOrdinal,section);   
						if(i==0){
							onClickSection=data[i].sectionOrdinal;
						};
                    }            		
            		screenJs.addSectionMapToTab();            		
        			screenFieldJs.addScreenFieldToTr();
            	}
            }
        });	
	})(jQuery);	
	var screenSubmitJs = {
		screenSubmit: function(){	
			var $form =$("#screenFrom", $page);
			if (!$form.valid()) {				
				return;
            }; 
			if(sectionMap.size()==0){				
				alertMsg.error("请先填写版块信息");
                return false;
			}				
			screenJs.addSectionToMap();
			$.DWZajax({
                url:hostUrl +"/screen/saveScreen",
                data:{
                	'pattern':"modify",
                	'navTabId':$("input[name='navTabId']",$page).val(),
                	'sectionMap':JSON.stringify(sectionMap),
                	'screenCode':$("input[name='screenCode']",$page).val(),
                	'screenText':$("input[name='screenText']",$page).val(),
                	'businessType':$("select[name='businessType']",$page).val()},
                callback:function(data){
                	if(!data){
                		alertMsg.error(data);
                	}
                	$.pdialog.closeCurrent();
                	alertMsg.correct("<@label key='successfulOperation.M'>操作成功</@label>");
                	navTab.reload(hostUrl + "/screen/screenList?navTabId=${navTabId!''}");
                }
            });           
		}
	};
	var screenFieldJs = {
		addScreenFieldToTr: function(){
			var section = sectionMap.get(onClickSection);
			fieldMap = section.screenFields;
			$("#screenFieldTable .gridTbody", $page).find("table tbody").html("");
			var keys = fieldMap.keys();
			for(var i=1; i<=keys.length; i++){
				var screenField = fieldMap.get(i);
				var gridTheadTh = $("#screenFieldTable", $page).find("table thead th");
				var tr = "<tr id='"+screenField.fieldOrdinal+"'>";
				if(screenField.businessField!=null){
					tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div>"+screenField.businessField+"</div></td>";
					tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>"+(screenField.businessFieldText || '')+"</div></td>";
				}else{
					tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div>（占位符）</div></td>";
					tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>（占位符）</div></td>";
				};
				if(screenField.readonlyFlag==1){
					tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div><input name='readonlyFlag'  value='"+screenField.fieldOrdinal+"' disabled checked='true' type='checkbox'/></div></td>";
				}else{
					tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div><input name='readonlyFlag' value='"+screenField.fieldOrdinal+"' disabled type='checkbox'/></div></td>";
				};				
				$("#screenFieldTable .gridTbody", $page).find("table tbody").append(tr);	
			};
		}
	};
	var screenJs = {
		_showClickSection: function(_this){
			onClickSection=$(_this).attr("id");
			screenFieldJs.addScreenFieldToTr();
		},
		addSectionToMap: function(){
			var keys = sectionMap.keys();
			for(var i=0; i<keys.length; i++){
				var section =sectionMap.get(keys[i]);
				section.sectionCode=$("input[name='sectionCode"+keys[i]+"']",$page).val();
				section.sectionText=$("input[name='sectionText"+keys[i]+"']",$page).val();
			}
		},
		addSectionMapToTab: function(){
			$("#sectionTable .gridTbody", $page).find("table tbody").html("");
			for(var i=1; i<=row; i++){				
				var sectionvar = sectionMap.get(i);
				var gridTheadTh = $("#sectionTable", $page).find("table thead th");
				var tr = "<tr id='"+i+"' onclick='screenJs._showClickSection(this);'>";			
				tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div>"+sectionvar.sectionCode+"</div></td>";
				tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>"+sectionvar.sectionText+"</div></td>";
				$("#sectionTable .gridTbody", $page).find("table tbody").append(tr);	
			};
		}
	};
</script>
